<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function f1(){
            alert(document.getElementById("s1").selectedIndex);
        }

        function f2(index){
            alert(index);
        }

        function f3(){
            var s1=document.getElementById("s1");

            var options=s1.options;

            console.log(options);

            console.log(options.selectedIndex);

            for (var i = 0; i < options.length; i++) {
                var option=options[i];
                console.log(option);
                console.log(option.innerHTML,option.text,option.value);
                // option.innerHTML="<h1>Hello</h1>";
                // option.innerText="<h1>Hello</h1>";
                // option.text="<h1>Hello</h1>";
            }
        }

        function f4(){
            var s1=document.getElementById("s1");

            // var op=document.createElement("option");
            // op.value="4";
            // op.innerHTML="ddd";
            // s1.appendChild(op);

            // s1.innerHTML=s1.innerHTML+"<option value='4'>ddd</option>"

            var op=new Option("ddd",4);

            s1.options[s1.length]=op;

        }

        function f5(){
            var s1=document.getElementById("s1");

            console.log(s1.options.length);

            s1.options[1]=null;

            console.log(s1.options.length);
        }

        function f6(){
            var s1=document.getElementById("s1");

            s1.options.length=0;
        }
    </script>

</head>
<body>
    <select id="s1" onchange="f2(this.selectedIndex);">
        <option value="1">aaa</option>
        <option value="2">bbb</option>
        <option value="3">ccc</option>
    </select>

    <a href="javascript:;" onclick="f1();">test1</a>
    <a href="javascript:;" onclick="f3();">test2</a>
    <a href="javascript:;" onclick="f4();">test3</a>
    <a href="javascript:;" onclick="f5();">test4</a>
    <a href="javascript:;" onclick="f6();">test5</a>
</body>
</html>